<template>
    <div class="wrap vote-detail">
        <div class="wrap-header">
            <span class="font-normal">截止日期：{{deadline}}</span>
        </div>
        <div class="wrap-cont">
            <div class="wrap-cont-cover">
            <div class="card">
                <div v-for="item in idolList" class="card-item">
                    <img
                        :src="baseURL+item.image">
                    <div class="clearfix card-font">{{item.itemTitle}}
                        <i class="el-icon-star-on primary ml8 pointer" v-if="item.userVoteStatus===0"
                           @click="vote(item.activityItemId)">{{item.itemPoll}}</i>
                        <i v-else class="el-icon-star-on ml8 disabled">{{item.itemPoll}}</i>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
    import {baseURL} from "../../utils/axios";

    export default {
        name: "detail",
        data() {
            return {
                deadline: '',
                idolList: [],
                baseURL: baseURL
            }
        },
        methods: {
            getDetail() {
                this.$api.vote.voteDetail({
                    "activityId": this.$route.params.id,
                    "userId": sessionStorage.getItem('id')
                }).then(res => {
                    this.idolList = res.data.activityItemVoList;
                    this.deadline = res.data.deadline;
                })
            },
            vote(id) {
                this.$api.vote.vote({
                    "activityItemId": id,
                    "userId": sessionStorage.getItem('id')
                }).then(res => {
                    if (res.code === 200) {
                        this.$message.success('投票成功');
                        this.getDetail();
                    }
                })
            }
        },
        mounted() {

            // 模拟接口返回状态，判断用户状态
            setTimeout(() => {
                this.$eventBus.emit('updateTitle', this.$route.params.title)
            });
            this.getDetail();

        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    .vote-detail {
        .bottom {
            margin-top: 8px;
            display: flex;
            justify-content: space-between;
        }

        .primary {
            color: $text-color-primary;
        }
        .image {
            width: 100%;
            display: block;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .el-card {
            padding-bottom: 20px;
        }

        .el-card__body {
            height: 160px;
            img {
                height: 120px;
            }
        }

        .el-button--mini {
            padding: 4px;
        }
        .card {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

            &-item {
                margin: 4px;
                border-radius: 4px;
                border: 1px solid #ebeef5;
                background-color: #fff;
                overflow: hidden;
                color: #303133;
                -webkit-transition: 0.3s;
                transition: 0.3s;
                padding-left: 6px;
                padding-right: 6px;
                width: 18%;
                text-align: center;
            }

            &-font {
                font-size: 18px !important;
            }
            img {
                height: 140px;
            }
        }
        .disabled{
            cursor: no-drop;
        }
    }


</style>
